<template>
    <view class="home_page">
        <!-- 顶部渐变背景区域 -->
        <view class="top-gradient-section">
            <!-- 欢迎信息 -->
            <view class="welcome-section">
                <text class="welcome-title">欢迎您使用创闪宝合作伙伴</text>
            </view>
            
            <!-- 通知栏和日期 -->
            <view class="notification-bar">
                <view class="notification-left">
                    <text class="speaker-icon">📢</text>
                    <view class="scroll-container">
                        <view class="scroll-content" :style="{ transform: `translateX(${notificationConfig.scrollOffset}px)` }">
                            <text class="notification-text" v-for="(item, index) in notificationConfig.list" :key="index">
                                {{ item.text }}
                            </text>
                        </view>
                    </view>
                </view>
                <view class="notification-right">
                    <span class="todayGg">今日:{{ currNoticeDay }}</span>
                </view>
            </view>
            
            <!-- 轮播图展示区域 -->
            <view class="swiper-section">
                <u-swiper 
                    :list="swiperConfig.list" 
                    :height="swiperConfig.height"
                    :indicator="true"
                    :indicatorMode="'dot'"
                    :indicatorStyle="{
                        bottom: '20rpx',
                        right: '20rpx'
                    }"
                    :autoplay="swiperConfig.autoplay"
                    :interval="swiperConfig.interval"
                    :circular="swiperConfig.circular"
                    @change="onSwiperChange"
                >
                    <template v-slot:default="{ item, index }">
                        <view class="swiper-item" :style="{ backgroundColor: item.bgColor }">
                            <view class="swiper-content">
                                <view class="swiper-text">
                                    <text class="swiper-title">{{ item.title }}</text>
                                    <text class="swiper-subtitle">{{ item.subtitle }}</text>
                                </view>
                                <view class="swiper-image">
                                    <u--image 
                                        :src="item.image" 
                                        width="120rpx" 
                                        height="120rpx"
                                        shape="circle"
                                        :fade="true"
                                        :loading="true"
                                    ></u--image>
                                </view>
                            </view>
                        </view>
                    </template>
                </u-swiper>
            </view>
        </view>

        <!-- 数据统计区域 -->
        <view class="data-section">
            <!-- 工作台区域 -->
            <view class="homeBlock">
                <view class="homeLabel">我的项目<span>(业务类型)</span></view>
                <view class="homeMenuList">
                    <view class="homeMenuLi" @tap="navToMicro">
                        <view class="homeMenuLiIcon homeMenuLiIcon0"></view>
                        <view class="homeMenuLiText">小微业务</view>
                    </view>
                    <view class="homeMenuLi" @tap="navToMerchant">
                        <view class="homeMenuLiIcon homeMenuLiIcon1"></view>
                        <view class="homeMenuLiText">商家业务</view>
                    </view>
                    <view class="homeMenuLi" @tap="navToCommunication">
                        <view class="homeMenuLiIcon homeMenuLiIcon2"></view>
                        <view class="homeMenuLiText">通信业务</view>
                    </view>
                    <view class="homeMenuLi" @tap="navToMicroLink">
                        <view class="homeMenuLiIcon homeMenuLiIcon3"></view>
                        <view class="homeMenuLiText">微连业务</view>
                    </view>
                    <view class="homeMenuLi" @tap="navToOrgManage">
                        <view class="homeMenuLiIcon homeMenuLiIcon4"></view>
                        <view class="homeMenuLiText">机构管理</view>
                    </view>
                    <view class="homeMenuLi" @tap="navToAccount">
                        <view class="homeMenuLiIcon homeMenuLiIcon5"></view>
                        <view class="homeMenuLiText">帐户余额</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import dayjs from 'dayjs';

    export default {
        components: {},
        data() {
            return {
                // 通知滚动配置
                notificationConfig: {
                    list: [
                        { text: '2025年最新活动政策,已上线!' },
                        { text: '全新供货政策上线！一台起订无限拿货！' },
                        { text: '合作伙伴专属优惠，限时抢购中！' },
                        { text: '系统升级完成，功能更强大！' }
                    ],
                    scrollOffset: 0,
                    scrollTimer: null,
                    scrollSpeed: 1, // 每次移动像素
                    scrollInterval: 50, // 移动间隔(ms)
                    resetDistance: 300 // 重置距离
                },
                // 轮播图配置
                swiperConfig: {
                    list: [
                        {
                            id: 1,
                            title: '全新供货政策',
                            subtitle: '一台起订无限拿货',
                            image: require('@/static/newIcon/p_001.png'),
                            bgColor: '#427AF5'
                        },
                        {
                            id: 2,
                            title: '合作伙伴优惠',
                            subtitle: '专属优惠限时抢购',
                            image: require('@/static/newIcon/p_002.png'),
                            bgColor: '#5A8BFF'
                        },
                        {
                            id: 3,
                            title: '系统升级完成',
                            subtitle: '功能更强大更稳定',
                            image: require('@/static/newIcon/p_003.png'),
                            bgColor: '#427AF5'
                        }
                    ],
                    height: 200,
                    autoplay: true,
                    interval: 3000,
                    circular: true
                },
                todayDate: new Date()
            }
        },
        onLoad() {
            try {
                this.startScroll();
            } catch (error) {
                console.error('页面加载时启动滚动失败:', error);
            }
        },
        onShow() {
            try {
                this.startScroll();
            } catch (error) {
                console.error('页面显示时启动滚动失败:', error);
            }
        },
        onHide() {
            this.stopScroll();
        },
        onUnload() {
            this.destroy();
        },
        computed: {
            currNoticeDay() {
                 return dayjs(this.todayDate).format('MM月DD日');
            },
        },
        methods: {
            /**
             * 启动通知滚动动画
             */
            startScroll() {
                try {
                    this.stopScroll(); // 先清除之前的定时器
                    this.notificationConfig.scrollOffset = 0;
                    
                    // 延迟启动滚动，确保DOM已渲染
                    this.$nextTick(() => {
                        this.notificationConfig.scrollTimer = setInterval(() => {
                            this.notificationConfig.scrollOffset -= this.notificationConfig.scrollSpeed;
                            
                            // 当滚动到一定距离时重置位置，实现循环
                            if (Math.abs(this.notificationConfig.scrollOffset) >= this.notificationConfig.resetDistance) {
                                this.notificationConfig.scrollOffset = 0;
                            }
                        }, this.notificationConfig.scrollInterval);
                    });
                } catch (error) {
                    console.error('启动滚动动画失败:', error);
                }
            },
            
            /**
             * 停止通知滚动动画
             */
            stopScroll() {
                try {
                    if (this.notificationConfig.scrollTimer) {
                        clearInterval(this.notificationConfig.scrollTimer);
                        this.notificationConfig.scrollTimer = null;
                    }
                } catch (error) {
                    console.error('停止滚动动画失败:', error);
                }
            },
            
            /**
             * 轮播图切换事件
             * @param {Number} index 当前索引
             */
            onSwiperChange(index) {
                // console.log('轮播图切换到第', index + 1, '张');
                // 可以在这里添加统计或其他逻辑
            },
            
            /**
             * 页面销毁时清理资源
             */
            destroy() {
                this.stopScroll();
            },
            
            /**
             * 跳转到小微业务页面
             */
            navToMicro() {
                uni.navigateTo({
                    url: '/pages/micro/index'
                });
            },
            
            /**
             * 跳转到商家业务页面
             */
            navToMerchant() {
                uni.navigateTo({
                    url: '/pages/merchant/index'
                });
            },
            
            /**
             * 跳转到通信业务页面
             */
            navToCommunication() {
                uni.navigateTo({
                    url: '/pages/communication/index'
                });
            },
            
            /**
             * 跳转到微连业务页面
             */
            navToMicroLink() {
                uni.navigateTo({
                    url: '/pages/microLink/index'
                });
            },
            
            /**
             * 跳转到机构管理页面
             */
            navToOrgManage() {
                uni.navigateTo({
                    url: '/pages/insitutional/index'
                });
            },
            
            /**
             * 跳转到帐户余额页面
             */
            navToAccount() {
                uni.navigateTo({
                    url: '/pages/account/index'
                });
            }
        }
    
    };
</script>

<style lang="scss" scoped>
    // CSS变量定义
    :root {
        --primary-color: #427AF5;
        --secondary-color: #5A8BFF;
        --background-color: #F8F8F9;
        --text-color: #333;
        --text-light: #666;
        --border-radius: 20rpx;
        --shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
    }

    .home_page {
        position: relative;
        background-color: var(--background-color);

        // 顶部渐变背景区域
        .top-gradient-section {
            background: #b9cdfb;
            padding: 20rpx 30rpx 20rpx 30rpx;
            position: relative;

            .welcome-section {
                text-align: left;
                margin-bottom: 20rpx;

                .welcome-title {
                    font-size: 40rpx;
                    font-weight: bold;
                    color: var(--text-color);
                }
            }

            .notification-bar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 40rpx;

                .notification-left {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    overflow: hidden; // 隐藏超出部分

                    .speaker-icon {
                        font-size: 32rpx;
                        margin-right: 15rpx;
                        flex-shrink: 0; // 防止图标被压缩
                    }

                    .scroll-container {
                        flex: 1;
                        overflow: hidden;
                        white-space: nowrap;
                    }

                    .scroll-content {
                        display: inline-block;
                        white-space: nowrap;
                        transition: none; // 禁用过渡动画，使用transform实现平滑滚动
                    }

                    .notification-text {
                        font-size: 28rpx;
                        color: var(--text-color);
                        margin-right: 60rpx; // 通知之间的间距
                        display: inline-block;
                    }
                }

                .notification-right {
                  border: 1px solid #999;
                  border-radius:40px;
                  line-height: 45rpx;
                  padding-left: 10rpx;
                    .todayGg {
                        padding: 8rpx 20rpx;
                        border-radius: 1px solid var(--border-radius);
                        font-size: 24rpx;
                        color: var(--text-light);
                        border: none;
                    }
                }
            }

            .swiper-section {
              
                border-radius: var(--border-radius);
                overflow: hidden;

                .swiper-item {
                    height: 200rpx;
                    border-radius: var(--border-radius);
                    position: relative;
                    overflow: hidden;

                    .swiper-content {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        height: 100%;
                        padding: 40rpx;
                        position: relative;

                        .swiper-text {
                            flex: 1;
                          
                            z-index: 2;

                            .swiper-title {
                                display: block;
                                font-size: 36rpx;
                                font-weight: bold;
                                margin-bottom: 15rpx;
                                line-height: 1.2;
                            }

                            .swiper-subtitle {
                                display: block;
                                font-size: 28rpx;
                                opacity: 0.9;
                                line-height: 1.3;
                            }
                        }

                        .swiper-image {
                            z-index: 2;
                            margin-left: 30rpx;

                            .u--image {
                                border: 3rpx solid rgba(255, 255, 255, 0.3);
                                box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
                            }
                        }

                        // 添加渐变遮罩效果
                        &::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
                            z-index: 1;
                        }
                    }
                }
            }
        }

        // 数据统计区域
        .data-section {
            padding: 10rpx;
          

            .homeBlock {
                background-color: white;
                margin-top: 20rpx;
                padding: 10rpx 0;

                .homeLabel {
                    margin-bottom: 20rpx;
                    margin-left: 30rpx;
                    font-size: 38rpx;
                    font-weight: bold;
                    color: #000000;
                    line-height: 65rpx;
                    span{
                        color: #c7c5c5;
                        font-size: 26rpx;
                        font-weight: 400;
                        margin-left: 10rpx;
                    }
                }

                .homeMenuList {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    margin-top: -20rpx;

                    .homeMenuLi {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-flow: column;
                        width: 25%;
                        margin-top: 30rpx;

                        .homeMenuLiIcon {
                            width: 79rpx;
                            height: 79rpx;
                            background: var(--primary-color);
                            border-radius: 23rpx;
                            background-repeat: no-repeat;
                            background-position: center center;
                            background-size: 100% 100%;
                            background-image: url(../../static/newIcon/p_001.png);
                        }

                        .homeMenuLiText {
                            font-size: 27rpx;
                            font-weight: 400;
                            color: var(--text-color);
                            margin-top: 14rpx;
                        }
                    }
                }
            }
        }
    }
</style>